<template>
  <div>
    <el-input style="width: 70px" v-model="name"></el-input>
    <el-button icon="el-icon-search" circle @click="paging(1)"></el-button>

    <el-table :data="page.list">
      <el-table-column prop="u_id" label="序号"></el-table-column>
      <el-table-column prop="u_username" label="账号"></el-table-column>
      <el-table-column prop="u_name" label="姓名"></el-table-column>
      <el-table-column prop="u_age" label="年龄"></el-table-column>
      <el-table-column prop="u_sex" label="性别"></el-table-column>
      <el-table-column prop="u_phone" label="电话"></el-table-column>
      <el-table-column prop="u_address" label="地址"></el-table-column>
      <el-table-column prop="u_phtotpath" label="照片">
        <template scope="p">

          <img :src="p.row.u_photopath" alt="" width="50px">
        </template>
      </el-table-column>
      <el-table-column prop="u_identity" label="身份"></el-table-column>


      <el-table-column label="操作" prop="a_id">

        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="toUpdate(scope.row.u_id)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.u_id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.curPage" :page-sizes="[2,3,4,5]" :page-size="page.pageSize" layout="total,sizes,prev,pager,next,jumper" :total="page.count"></el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pageSize:2,
        user:{},
        page:{},
        name:'',
      }
    },
    methods:{
      paging(curPage){
        this.$axios.get('/UserServlet/list?curPage='+curPage + '&u_username=' + this.name + '&pageSize=' + this.pageSize)
          .then(resp=>{
            this.page = resp.data;
          })
      },
      toUpdate(id){
        this.$router.push('/user/update/' + id)
      },
      del(id){
        alert(id)
        this.$axios.get('UserServlet/del?u_id='+ id)
          .then(resp=>{
            this.paging(1)
          })
      },
      handleCurrentChange(newPage){
        this.paging(newPage)
      },
      handleSizeChange(newSize){
        this.pageSize = newSize;
        this.paging(1)
      },

    },
    created() {
      this.paging(1)
    },

  };
</script>

<style scoped>

</style>
